<!-- 实名认证 -->
<template>
	<view>
		<view class="boxlv"></view>
		<view class="m-card">
			<u--form labelPosition="left" :borderBottom="false" :model="formData" :labelStyle="{ color: '#5a5a5a' }"
				labelWidth="50">
				<u-form-item>
					<u--image @click="requestStatus ? uploadImg('FRONT') : ''"
						:src="formData.IdNum ? oss + '/df/room_011.png' : oss + '/df/room_01.png'" width="100%"
						height="150" mode="aspectFit"></u--image>
				</u-form-item>
				<u-form-item label="姓名" required>
					<view class="m-form-item m-line-1">{{ formData.Name }}</view>
				</u-form-item>
				<u-form-item label="公民身份号码" labelWidth="120" required>
					<view class="m-form-item m-line-1">{{ formData.IdNum }}</view>
				</u-form-item>
				<u-form-item>
					<u--image @click="requestStatus ? uploadImg('BACK') : ''"
						:src="formData.ValidDate ? oss + '/df/room_022.png' : oss + '/df/room_02.png'" width="100%"
						height="150" mode="aspectFit"></u--image>
				</u-form-item>
				<u-form-item label="有效日期" labelWidth="70" required>
					<view class="m-form-item m-line-1">{{ formData.ValidDate }}</view>
				</u-form-item>
				<u-form-item>
					<u--image @click="requestStatus ? uploadImg('DEED') : ''"
						:src="formData.Owner ? oss + '/df/room_033.png' : oss + '/df/room_03.png'" width="100%"
						height="150" mode="aspectFit"></u--image>
				</u-form-item>
				<u-form-item label="权利人" required>
					<view class="m-form-item m-line-1">{{ formData.Owner }}</view>
				</u-form-item>
				<u-form-item label="坐落" required>
					<view class="m-form-item m-line-1">{{ formData.Address }}</view>
				</u-form-item>
				<u-form-item v-if="queren" labelWidth="70" label="委托协议" required>
					<view class="m-form-item m-line-1" @click="show = true">签署协议</view>
				</u-form-item>
			</u--form>
			<view class="boxti" @click="requestStatus ? sumit() : ''">确认无误， 进行提交</view>
		</view>
		<u-popup :show="show" @close="show = false" mode="top" bgColor="transparent" round="10"
			:customStyle="{ top: '30rpx' }">
			<view class="m-mg-lr boxding">
				<u--form labelPosition="left" :borderBottom="false" :model="formData" ref="form1" labelWidth="100"
					:labelStyle="{ fontSize: '24rpx', color: '#5a5a5a' }">
					<u-form-item label="甲方(委托方)" ref="item1">
						<u-search shape="square" searchIcon=" " disabled :clearabled="false" height="64"
							:showAction="false" v-model="formData.Owner" inputAlign="right" bgColor="#eee"
							placeholder=" "></u-search>
					</u-form-item>
					<u-form-item label="乙方(受托方)" ref="item1">
						<u-search shape="square" searchIcon=" " disabled :clearabled="false" height="64"
							:showAction="false" v-model="formData.Name" inputAlign="right" bgColor="#eee"
							placeholder=" "></u-search>
					</u-form-item>
					<view class="">
						<view class="c5a u-m-b-20">协议内容</view>
						<u-parse :content="xieyi.leasecontract"></u-parse>
					</view>
					<u-form-item label="甲方(委托方)" ref="item1">
						<u-search shape="square" searchIcon=" " disabled :clearabled="false" height="64"
							:showAction="false" v-model="formData.Owner" inputAlign="right" bgColor="#eee"
							placeholder=" "></u-search>
					</u-form-item>
					<u-form-item label="乙方(受托方)" ref="item1">
						<u-search shape="square" searchIcon=" " disabled :clearabled="false" height="64"
							:showAction="false" v-model="formData.Name" inputAlign="right" bgColor="#eee"
							placeholder=" "></u-search>
					</u-form-item>
				</u--form>
				<view class="u-m-t-30 u-flex u-flex-items-center">
					<checkbox-group @change="checkboxChange">
						<label>
							<checkbox :value="label.name" :checked="label.checked" color="#0e5642"
								style="transform:scale(0.7)" />
						</label>
					</checkbox-group>
					<view>{{ label.name }}</view>
				</view>
				<view class="u-m-t-30 u-flex boxali u-flex-center">
					<view class="boxque" :class="!label.checked ? '' : 'boxquelv'"
						@click="label.checked ? getclick() : ''">确认提交</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				formData: {
					Name: '',
					IdNum: '',
					ValidDate: '',
					Owner: '',
					Address: ''
				},
				renzhengID: null,
				xieyi: '',
				label: {
					checked: false,
					name: '本人已却读完上述条款，并确认按合同履行相关事务'
				},
				queren: false,
				show: false
			};
		},
		onLoad(e) {
			// this.getxie();
		},
		watch: {
			'formData.Owner'(newval) {
				if (newval && this.formData.Name && newval !== this.formData.Name) {
					// this.show = true;
					// this.queren = true;
				}
			}
		},
		methods: {
			async getxie() {
				let res = await this.require('getContrac');
				if (res) {
					for (var i = 0; i < res.length; i++) {
						if (res[i].title === '委托协议') {
							console.log(res[i].title);
							this.xieyi = res[i].value;
						}
					}
				}
			},
			async getclick() {
				this.show = false;
				this.queren = false;
			},
			uploadImg(type) {
				this.requestStatus = false;
				const that = this;
				uni.chooseImage({
					count: 1,
					success: async res => {
						uploadImage(
							res.tempFilePaths[0],
							'cardUploads/' + uni.$u.timeFormat(new Date(), 'yyyymmdd'),
							async result => {
									let option = {};
									if (type === 'DEED') {
										option.propimage = result;
										let obj1 = await this.require('fangchanzhengshibie', option);
										if (obj1) {
											this.formData.FZ = obj1.id;
											let fangzi = JSON.parse(obj1.data);
											for (var i = 0; i < fangzi.length; i++) {
												if (fangzi[i].Name === '权利人') {
													this.formData.Owner = fangzi[i].Value;
												}
												if (fangzi[i].Name === '坐落') {
													this.formData.Address = fangzi[i].Value;
												}
											}
										}
									} else {
										option['idcardimage' + (type == 'BACK' ? '2' : '')] = result;
										if (this.renzhengID) {
											option.id = this.renzhengID
										}
										let obj = await this.require('usershiming', option);
										if (obj) {
											if (type == 'BACK') {
												this.formData.ValidDate = obj.ValidDate;
												if (!this.renzhengID) {
													this.renzhengID = obj.id;
												}
											} else {
												this.formData.IdNum = obj.IdNum;
												this.formData.Name = obj.Name;
												if (!this.renzhengID) {
													this.renzhengID = obj.id;
												}
											}
										}
									}
								},
								result => {
									//这里写上传失败的代码
									console.log(JSON.stringify(result));
								}
						);
					},
					complete() {
						that.requestStatus = true;
					}
				});
			},
			checkboxChange(n) {
				var values = n.detail.value;
				if (values.includes(this.label.name)) {
					this.label.checked = true;
				} else {
					this.label.checked = false;
					this.queren = false;
				}
			},
			async sumit() {
				if (!this.formData.IdNum) {
					return this.$u.toast('请上传身份证人像面');
				}
				if (!this.formData.ValidDate) {
					return this.$u.toast('请上传身份证国徽面');
				}
				if (!this.formData.Owner) {
					return this.$u.toast('请上传房产证内页');
				}
				// if (this.formData.Name !== this.formData.Owner && this.queren) {
				// 	return this.$u.toast('请签署委托协议');
				// }
				uni.setStorageSync('renzheng_ids', JSON.stringify({
					ZM: this.renzhengID,
					FZ: this.formData.FZ
				}));
				this.nextNav('back');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.boxlv {
		background-color: #0e5642;
		height: 80rpx;
	}

	.m-card {
		margin: -30rpx 30rpx 30rpx;
		padding: 40rpx;
	}

	.m-form-item {
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #eee;
	}

	.boxti {
		width: 352rpx;
		height: 70rpx;
		margin: 20rpx auto 0;
		line-height: 70rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		background-color: #0e5543;
	}

	.boxding {
		overflow-y: auto;
		height: 90vh;
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.boxque {
		width: 244rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		background-color: #bfbfbf;
		border-radius: 10rpx;
	}

	.boxquelv {
		background-color: #0e5642;
	}
</style>
